<template>
    <div class="c_tree">
        <div v-for="item of list" :key="item.index" class="c_treeList" :class="{showLi:item.show}">
            <h4 @click="toggleShow(item)" class="us_none">{{item.name}}</h4>
            <ul v-if='item.item' v-show="item.item&&item.show">
                <li v-for="items of item.item" :key="items.index">
                    <router-link :to='{path:`/about/${items.link}`}'>{{items.name}}</router-link>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
const dats = require('@/assets/json/menu.json')  
export default {
    name:'cTree',
    data(){
        return {
            list:dats,
            clink:this.$route.path
        }
    },
    watch:{
        "$route.path"(newVal){
            this.clink=newVal 
        }
    },
    methods:{
        toggleShow(ctx){
            this.list.forEach(i => {
                if (i.show !== ctx.show) {
                    i.show = false;
                }
            })
            ctx.show=!ctx.show;
        }
    }
}
</script>
<style scoped>
    .c_treeList h4{
        overflow: hidden;
        padding: 0 16px;
         cursor: pointer;
         line-height: 34px;
        background: #F7F7F7;
    }
    .c_treeList a{display: block;width:100%}
    .c_treeList{position: relative;}
    .c_treeList li{padding: 0 16px;line-height: 20px;cursor: pointer;}
    .c_treeList ul{height:0;transition: all 0.5s linear;}
    .showLi ul{height:auto}
    .active{color:red;font-weight: bold}
</style>